デザイナーが集まってログイン画面について話し合ってみた

暗黙知になっていることをクラスメソッドのデザイナーみんなで共有してみようの会として、UIの共有会を開催しました。

デザイナー勉強会

#UIデザイン

#デザイン

藤田花梨

2022.08.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

今回はログイン画面について対話しました。

これまでの共有会

情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。

そもそもログインって？

初めてログインする場合（新規登録）

ログインのやり方は「IDとパスワードを入力する」だけです。 ただし、初めてログインする場合は、新規登録する必要があります。IDとパスワードを登録して事前にアカウントを作成します。

ログインのタイミング

ログインのタイミングは、サービスによって異なり、大きく分けて2つあると考えます。

1つ目は、アプリ起動時すぐのタイミング。
ログインしないとそもそもサービスが使えないものです。
例えば、銀行アプリが該当します。

例：スプラッシュ画面後のログイン画面

2つ目は、サービス利用中のタイミング。
ログインしなくても、一定の機能は使えますが、一定以上の機能を使う場合にログインが必要になります。
例えば、旅行予約や通販サービスが該当します。まず、何があるか、どんなサービスなのかを見せ、「使いたい」と思わせてからログインを要求します。
ログインのタイミングによって、画面内に必要な要素も少し変わるので順番に紹介していきます。

例：商品を購入する時のログイン画面

ログイン画面に必要な要素

ログイン画面に最低限必要な要素は、下記6項目が上がりました。

ログインID
パスワード
パスワードの再設定
ログイン（送信）ボタン
新規登録
ログイン画面を閉じる機能（※）

※ログイン画面を閉じる機能は前述した「サービス利用中に、ログインする」場合に必要になります。よく見られるものとして「ログインせずに使う」という文言のボタンがあります

次は、項目毎に深掘りしていきます。

1.ログインID

ログインIDは、ユーザー名ではなくメールアドレスか電話番号

ほとんどの場合、ユーザー名やメールアドレス、電話番号でログインIDを設定します。
ログインIDは、パスワード再設定時にも使用するため、覚える必要があります。
そのため、サービス毎に異なるユーザー名より、使用頻度の高いメールアドレスか電話番号を設定する方が好ましいです。

2.パスワード

表示/非表示の切り替え機能

パスワードはセキュリティー上、非表示にする方が好ましいですが、非表示のままだとパスワードを正確に入力できているか分かりません。そこで、必要になるのがパスワードの表示/非表示の切り替え機能です。

機能の示し方

表示/非表示の切り替え機能を示す手段に「目のアイコン」と「文字」の2通りがあります。
知識や経験がある方は「目のアイコン」が「表示/非表示の切り替え機能を示している」と理解し、機能を使うことが出来ますが、そうでない方はどうでしょうか？
アイコンの解釈に時間がかかる、また、その機能に気づかない可能性があります。
アイコンは、相手のリテラシーによって解釈が変わることを理解した上で「アイコン」と「文字」の使い分けをしていきましょう。

3.パスワードの再設定

ユーザーの入力する負担を減らす

パスワードはほとんどの場合、ログインIDの情報を使用し再設定することが出来ます。ログインを何度か試みた後、パスワードの再設定に移る方が多いのではないでしょうか。
そのため、再設定に必要なログインIDの情報は入力済みの場合がほとんどです。
再設定する画面では、既に入力した情報を引き継ぎ、ユーザーの入力する負担を減らしましょう。

赤く塗りつぶしている箇所は、同じ情報を入力する部分です。
Aパターンは2回に対し、情報を引き継ぐBパターンは、0回ということが分かります

4~5.ログインと新規登録

直感的な判別

「ログイン」と「新規登録」と当記事では扱っていますが、他に「サインイン」と「サインアップ」のように言い換えることもできます。
ただ、同じ画面上に似た言葉があると、直感的に判別出来ません。また、サインインとサインアップの入力フォームは似ていることもあり、より混乱を招く恐れがあります。
「ログイン」と「新規登録」のように言葉の使い分けをするほか、見た目のスタイルを変えると直感的に分かりやすくなり、ユーザーに優しいログイン画面になります。
また、切り替えが簡単だと誤ってクリックした場合でも、スムーズにログインすることが出来ます。